<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input v-model="listQuery.id" clearable placeholder="用户id" style="width: 200px;" class="filter-item" />
      <el-input v-model="listQuery.phone" clearable placeholder="电话" style="width: 200px;" class="filter-item" />
      <el-select v-model="listQuery.status" placeholder="状态" clearable class="filter-item" style="width: 130px">
        <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.a" :value="item.b" />
      </el-select>


      <el-button  class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="getList">
        查询
      </el-button>
      <!-- <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="updataForm">
        添加
      </el-button> -->
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
    <el-table-column width="80px" align="center" label="用户ID">
      <template slot-scope="scope">
        <span style="color:#1890ff;" @click="showuser(scope.row.user_id)">{{ scope.row.user_id }}</span>
      </template>
    </el-table-column>
    <el-table-column width="80px" align="center" label="招商ID">
      <template slot-scope="scope">
        <span style="color:#1890ff;" @click="showuser(scope.row.zhaoshang_id)">{{ scope.row.zhaoshang_id }}</span>
      </template>
    </el-table-column>
    <el-table-column width="100px" align="center" label="银行卡ID">
      <template slot-scope="scope">
        <span  style="color:#1890ff;" @click="showcarduser(scope.row.user_back_id)">{{ scope.row.user_back_id }}</span>
      </template>
    </el-table-column>
      <el-table-column label="姓名" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.store_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="联系电话" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone||'-' }}</span>
          <!-- <img :src="baseimgurl + row.main_img" alt="" style="width:50px;height:50px;"> -->
        </template>
      </el-table-column>

    <el-table-column label="签名" width="100px;" align="center">
        <template slot-scope="{row}">
          <img :src="row.card_top" alt="" style="width:50px;height:50px;" @click="showvideo(row.card_top)">
        </template>
      </el-table-column>

      <el-table-column label="状态" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.status|statusFn }}</span>
          <!-- <img :src="baseimgurl + row.main_img" alt="" style="width:50px;height:50px;"> -->
        </template>
      </el-table-column>

      <!-- <el-table-column label="身份证" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.number_ID||'-' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="身份" width="100px;" align="center">
        <template slot-scope="{row}">
          <img :src="row.card_top" alt="" style="width:50px;height:50px;" @click="showvideo(row.card_top)">
        </template>
      </el-table-column> -->
  </el-table-column>
      
      
       <el-table-column label="名人介绍" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.introduce }}</span>
          <!-- <img :src="baseimgurl + row.main_img" alt="" style="width:50px;height:50px;"> -->
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.ctime|formatDate }}</span>
          <!-- <img :src="baseimgurl + row.main_img" alt="" style="width:50px;height:50px;"> -->
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="300" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <!-- <el-button type="primary" size="mini" @click="handleUpdate(row)">
            {{ row.status | statusFilter }}
          </el-button> -->
          <el-button v-if="row.status == 2" size="mini" type="success" @click="resetdata(row)">
            通过
          </el-button>
          <el-button  v-if="row.status == 2" type="danger" size="mini" @click="bohuiData(row)">
            驳回
          </el-button>
          <el-button size="mini" type="success" @click="gotodetails(row)">
            详情
          </el-button>
          <el-button size="mini"  @click="handleDelete(row,$index)">
            删除
          </el-button>


        </template>
      </el-table-column>

      <el-table-column label="驳回原因" width="300px">
        <template slot-scope="{row}">
          <span>{{ row.reject_msg||'-' }}</span>
          <!-- <img :src="baseimgurl + row.main_img" alt="" style="width:50px;height:50px;"> -->
        </template>
      </el-table-column>


    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />


    <el-dialog :visible.sync="showdialogvideo">
      <img :src="baseimgurl+showimgurl" alt="" style="width:780px;">
    </el-dialog>

    <el-dialog title="招商经理审核驳回" :visible.sync="isbohui">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="驳回原因" prop="username">
          <el-input v-model="bohuistr" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isbohui = false">
          取消
        </el-button>
        <el-button type="primary" @click="bohuimain()">
          确定
        </el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="czimgbig" title="用户详情" v-loading="userloading">
      <el-form >
        <el-row>
          <el-col :span="9">

            <el-form-item label="用户名">
              <el-input   v-model="userData.nickname"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="用户积分">
              <el-input  v-model="userData.unit" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="手机号">
              <el-input  v-model="userData.mobile"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="余额">
              <el-input v-model="userData.banlace"  />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form >

    </el-dialog>
    <el-dialog :visible.sync="cardUser" title="银行卡" v-loading="userloading">
      <el-form >
        <el-row>
          <el-col :span="9">

            <el-form-item label="姓名">
              <el-input   v-model="cardUserData.card_name"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">
            <el-form-item label="开户行">
              <el-input  v-model="cardUserData.card_bank" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="9">
            <el-form-item label="卡号">
              <el-input  v-model="cardUserData.card_number"  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <!-- &nbsp; -->
            <div class="" style="width:100%;height:20px;">

            </div>
          </el-col>
          <el-col :span="9">

          </el-col>
        </el-row>

      </el-form >

    </el-dialog>

  </div>
</template>

<script>
const __ = {
  formatDate: (date, fmt) => {
    const padLeftZero = (str) => {
      return ('00' + str).substr(str.length)
    }
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    const o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for (const k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
        const str = o[k] + ''
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str))
      }
    }
    return fmt
  }
}
import { getAppraiserList ,  storeAppraiser, delAppraiser } from '@/api/store'
import { getUserCardByInfo, getUserInfoByOrder } from '@/api/order'
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import texteditor from '@/views/components/texteditor'

let _catypelist = [];
export default {
  name: 'storeguwan',
  components: { Pagination, texteditor },
  filters: {
    formatDate(time) {
      return __.formatDate(new Date(time-0), 'yyyy-MM-dd hh:mm:ss')
    },
    statusFn(type){
      if(type == 2)return '待审核';
      if(type == 3)return '驳回';
      if(type == 1)return '已通过';
    },
  },
  data() {

    return {
      // storeId: _ADMINCONFIG.storeList.guwan,
      cardUser:false,
      cardUserData:{},
      czimgbig: false,
      userData: {},
      userloading: false,

      showimgurl: '',
      bohuistr: '',
      showdialogvideo: false,
      isbohui:false,
      baseimgurl: '',
      editorOption: {
        // some quill options
      },
      catypelist : [],
      dialogtitle: '',
      reData:null,
      list: [],
      total: 0,
      calendarTypeOptions: [{a: '待审核',b:2},{a: '已通过',b:1},{a: '驳回',b:3}],
      listQuery: {
        page: 1,
        limit: 20,
        id:  undefined,
        phone: undefined,
        status: undefined,
        sort: '+id'
      },
      listLoading: false,
      dialogFormVisible: false,
      imgList: ['http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg','http://140.143.146.33/upload/goods/6fe99cc3-0d30-43dd-89a2-acd4bdf312f1.jpg'],
      temp: {
        phone : '15500009999',
        introduce : '个人介绍',
        number_ID: '150429199999999999',
        appraiser_name  : '姓名这里',
        user_back_id : 1,
        user_id : 1,
        years_experience: '5年',
        appraiser_fee: 200,
        category_id: '17,18,19',
      },
      rules: {
        title: [{ required: true, message: '标题为必填项！', trigger: 'blur' }]
      },
    }


  },
  created() {
    this.getList();
    // this.getcatype();
  },
  methods: {

    showuser(id){
      this.userloading = true;
      getUserInfoByOrder({id}).then(res=>{
        this.userData = res;
        this.czimgbig = true
        this.userloading = false
      })
    },
    showcarduser(id){
      this.userloading = true;
      getUserCardByInfo({id}).then(res=>{
        console.log(res,'-----------')
        this.cardUserData = res;
        this.cardUser = true
        this.userloading = false
      })
    },
    gotodetails(data){
        this.$router.push('/shop_list/appraiser_detail?id='+data.id);
    },
    bohuimain() {
      if (!this.bohuistr) {
        return this.$message({
          message: '请填写驳回原因',
          type: 'error'
        })
      }
      const data = this.reData
      this.listLoading = true
      data['status'] = 3
      data['reject_msg'] = this.bohuistr
      storeAppraiser(data).then((res) => {
        this.$notify({
          title: 'Success',
          message: '审核成功！',
          type: 'success',
          duration: 2000
        })
        this.bohuistr = '';
        this.isbohui = false;
        this.reData = null;
        this.getList()
      });
    },
    gettypename(id){
      return this.catypelist.find(el => el.id == id);
    },
    // getcatype(){
    //   this.listLoading = true
    //
    //   getMarketStore({
    //     category_id: this.storeId
    //   }).then(response => {
    //     // this.temp.type = response.data[0].title;
    //     this.catypelist = response.data;
    //     // _catypelist = this.catypelist;
    //
    //     setTimeout(() => {
    //       this.listLoading = false
    //     }, 1.5 * 1000)
    //   })
    // },
    handleDelete(row) {
      this.listLoading = true;
      this.$confirm(`确定要删除 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delAppraiser({id: row.id}).then((res) => {
          console.log(res);
          this.$notify({
            title: 'Success',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
      // this.list.splice(index, 1)
    },
    showvideo(data){
      this.showdialogvideo = true;
      this.showimgurl = data;
    },
    updataForm(){

      this.listLoading = true;
      const tempData = Object.assign({}, this.temp)
      tempData['img_list'] = this.imgList.join();
      storeAppraiser(tempData).then(() => {
        this.dialogFormVisible = false;
        this.$notify({
          title: 'Success',
          message: '操作成功！',
          type: 'success',
          duration: 2000
        });
        this.getList()
      })
      // console.log(this.temp)
    },

    handleCreate() {
      // this.resetTemp()
      // const text = "内蒙古自治区赤峰市翁牛特旗红山路乌丹第四小学";


      // console.log(values.address.match(regex_a), values.address.match(regex_b),values.address.match(regex_c))
      // return false;
      this.dialogtitle = '添加招商经理'
      this.temp = {
        phone : '',
        attract_name : '',
        user_id: '',
      };
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
        this.$refs['$upload'].clearFiles();
      })
    },
    resetdata(data){
      this.listLoading = true;
      this.$confirm(`确定要通过此审核 ？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        data['status'] = 1;
        data['reject_msg'] = '';
        storeAppraiser(data).then((res) => {
          this.$notify({
            title: 'Success',
            message: '审核成功！',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })

      }).catch(() => {
        this.listLoading = false;
      });
    },
    bohuiData(data){
      this.bohuistr = '';
      this.isbohui = true;
      this.reData = data;
    },
    getList(){
      getAppraiserList(this.listQuery).then(response => {
        console.log(response)
        let list = response.data;
        // this.catypelist.forEach((el, idx) => {
        //   let data = response[idx] || {entry_fee: 0, proxy_fee: 0, user_fee:0};
        //   list.push({category_name: el.name, category_id: el.id, ...data})
        // })
        this.list = list;
        this.total = response.count
        this.listLoading = false
      })
    }
  }
}
</script>
